{% extends "main.html" %}
{% load static %}

{% block "links" %}
	<link href="{% static "css/dropZoneFile.css" %}" rel="stylesheet">
	<link href="{% static "css/dropZone.css" %}" rel="stylesheet">
	<link href="{% static "css/timeline.css" %}" rel="stylesheet">
{% endblock %}

{% block "scripts" %}
	<script src="{% static "js/dropZoneFile.js" %}" defer></script>
	<script src="{% static "js/dropZone.js" %}" defer></script>
	<script src="{% static "lib/uncompress/bz2.js" %}" defer></script>
	<script src="{% static "lib/uncompress/pako.min.js" %}" defer></script>
	<script src="{% static "lib/uncompress/uncompress.js" %}" defer></script>
	<script src="{% static "lib/uncompress/archive.lib.min.js" %}" defer></script>
	<script src="{% static "lib/uncompress/xz.js" %}" defer></script>
	<script src="{% static "js/job.js" %}" defer></script>
	<script src="{% static "js/jobSubmission.js" %}" defer></script>
	<script src="{% static "js/timeline.js" %}" defer></script>
	<script src="{% static "js/timelineEvent.js" %}" defer></script>
	<script src="{% static "js/jobTable.js" %}" defer></script>
{% endblock %}

{% block "main-content" %}

{% block "navigation" %}
<!-- Navigation -->
	<a class="link-dark ps-2" style="text-decoration: none;" href="#">
	Home 
	</a>
		<svg class="m-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 19">
		<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
		</svg>
	<a class="" style="text-decoration: none;" href="#">
	Jobs
	</a>
{% endblock %}

<!-- Page Title -->
<h2 class="py-2 px-1 fw-bold">
	Submitted Jobs
</h2>

<!-- Content -->
<div class="container-fluid shadow-sm bg-white p-4 rounded-3">

<!-- Search/Create -->
<div class="row mb-3">
	<div class="col-lg-12">
		<div class="input-group justify-content-between">
			<input class="form-control me-2 rounded" id="job-search-bar" type="search" placeholder="Search...">
			<span class="input-group-btn">
				<button type="button" class="btn btn-primary text-light rounded-pill" data-bs-toggle="modal" data-bs-target="#create-job-modal">
					<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" class="bi bi-plus" viewBox="4 2.5 13 13">
						<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
					</svg>
					Create Job
				</button>
			</span>
		</div>
	</div>
</div>

<!-- Table -->
<table id="job-table" class="table table-hover table-striped border rounded-3" style="background-color: white">

	<!-- Headings -->
	<thead class="table-dark">
		<tr>
			<th scope="col" style="width: 25%">Name</th>
			<th scope="col" style="width: 15%">Language</th>
			<th scope="col" style="width: 15%">Students</th>
			<th scope="col" style="width: 20%">Date Created</th>
			<th scope="col" style="width: 15%">Duration</th>
			<th scope="col" style="width: 10%">Status</th>
		</tr>
	</thead>
	
	<!-- Jobs -->
	<tbody></tbody>

</table>
<div id="no-jobs-message" class="container text-center" style="display: none">No jobs have been created yet!</div></div>

<!-- Create Job Modal -->
<div class="modal fade" id="create-job-modal" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<form id="create-job-form">

				{% csrf_token %}

				<!-- Header -->
				<div class="modal-header bg-dark text-light">
					<h5 class="modal-title"><b>Create Job</b></h5>
					<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>

				<!-- Body -->
				<div class="modal-body">

					<!-- Drop Zone -->
					<div class="mb-3">
						<drop-zone id="job-drop-zone" filetypes="rar,tar,tar.bz2,tar.gz,tar.xz,zip" maxfilesize="{{MAX_FILE_SIZE}}" text="Drag and drop <b>student</b> files here!"></drop-zone>
					</div>

					<!-- Name -->
					<div class="mb-3">
						<label for="job-name">Name:</label>
						<input class="form-control" id="job-name" type="text" name="job-name" autocomplete="off" data-lpignore="true" data-form-type="text">
					</div>

					<!-- Language -->
					<div class="mb-3">
						<label for="job-language">Language:</label>
						<select class="form-select" id="job-language" name="job-language" data-form-type="other">
							{% for language, info in SUPPORTED_LANGUAGES.items %}
								<option language-id={{language}}>{{info.0}} </option>
							{% endfor %}
						</select>
					</div>

					<!-- Max Matches Until Ignored -->
					<div class="mb-3">
						<label for="job-max-until-ignored" class="form-label">Max matches until ignored:</label>
						<div class="d-flex">
							<input type="range" class="form-range" min="{{MAX_UNTIL_IGNORED_RANGE.0}}" step="1" max="{{MAX_UNTIL_IGNORED_RANGE.1}}" id="job-max-until-ignored" name="job-max-until-ignored" value="{{DEFAULT_MOSS_SETTINGS.max_until_ignored}}" oninput="this.nextElementSibling.value = this.value">
							<output style="width: 50px; text-align: right;">{{DEFAULT_MOSS_SETTINGS.max_until_ignored}}</output>
						</div>
					</div>

					<!-- Max Matches Displayed -->
					<div class="mb-3">
						<label for="job-max-displayed-matches" class="form-label">Max matches displayed:</label>
						<div class="d-flex">
							<input type="range" class="form-range" min="{{MAX_DISPLAYED_MATCHES_RANGE.0}}" step="1" max="{{MAX_DISPLAYED_MATCHES_RANGE.1}}" id="job-max-displayed-matches" name="job-max-displayed-matches" value="{{DEFAULT_MOSS_SETTINGS.max_displayed_matches}}" oninput="this.nextElementSibling.value = this.value">
							<output style="width: 50px; text-align: right;">{{DEFAULT_MOSS_SETTINGS.max_displayed_matches}}</output>
						</div>
					</div>

					<!-- Base Files -->
					<div class="mb-3">
						<label for="job-attach-base-files">Attach base files?</label>
						<input class="form-check-input ms-1" id="job-attach-base-files" type="checkbox" value="" name="job-attach-base-files" onchange="updateForBaseFiles();">
					</div>
				</div>

				<!-- Footer -->
				<div class="modal-footer d-flex justify-content-between p-2 bg-dark text-light">
					<label id="job-message"></label>
					<div style="position: relative; max-height: 50px;">
						<button id="create-job-button" type="submit" class="btn btn-outline-primary border-2 rounded-pill" disabled>
							<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" class="bi bi-plus" viewBox="4 2.5 13 13">
								<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
							</svg>
						Create</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- Remove Job Modal -->
<div class="modal fade" id="remove-job-modal" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">

			<!-- Header -->
			<div class="modal-header bg-dark text-light">
				<h5 class="modal-title"><b>Remove Job</b></h5>
				<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>

			<!-- Body -->
			<div class="modal-body text-center">
				<label>Are you sure you want to remove the following job:</label>
				<label class="fw-bold" id="remove-job-modal-label"></label>
			</div>

			<!-- Footer -->
			<div class="modal-footer d-flex p-2 bg-dark text-light">
				<button id="remove-job-modal-button" type="submit" class="btn btn-outline-primary border-2 rounded-pill ml-auto" data-bs-dismiss="modal">
					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
						<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
					</svg>
				Remove</button>
			</div>
		</div>
	</div>
</div>

<!-- Size Exceeded Modal -->
<div class="modal fade" id="size-exceeded-modal" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">

			<!-- Header -->
			<div class="modal-header bg-dark text-light">
				<h5 class="modal-title"><b>Maximum File Size Exceeded</b></h5>
				<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>

			<!-- Body -->
			<div class="modal-body text-center">
				<label>The file you uploaded is larger than {% widthratio MAX_FILE_SIZE 1000000 1 %}MB! Please download and use the following Python script to perform pre-processing on your local device:</label>
				<code>python preprocess.py &lt;inputFileName&gt; &lt;outputFileName&gt;<br></code>
				<span><br></span>
				<label>Then, drag and drop the output file into the dropzone.</label>
				<label class="fw-bold" id="remove-job-modal-label"></label>
			</div>

			<!-- Footer -->
			<div class="modal-footer d-flex p-2 bg-dark text-light">
				<button class="btn btn-outline-primary border-2 rounded-pill" onclick="downloadPythonScript();">
					<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-download pb-1 me-1" viewBox="0 0 16 16">
						<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path>
						<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></path>
					</svg>
					Download
				</button>
			</div>
		</div>
	</div>
</div>

<!-- Templated Variables -->
<script>

	const csrftoken = document.querySelector("[name=csrfmiddlewaretoken]").value;

	let SUPPORTED_LANGUAGES = {{ SUPPORTED_LANGUAGES | js }};
	let SUPPORTED_ARCHIVES = {{ SUPPORTED_ARCHIVES | js }};
	let FILES_NAME = "{{ FILES_NAME }}";
	let BASE_FILES_NAME = "{{ BASE_FILES_NAME }}";

	let statuses = {{ STATUSES | js }};
	let inQueueStatus = "{{ INQUEUE_STATUS }}";
	let uploadingStatus = "{{ UPLOADING_STATUS }}";
	let processingStatus = "{{ PROCESSING_STATUS }}";
	let parsingStatus = "{{ PARSING_STATUS }}";
	let completedStatus = "{{ COMPLETED_STATUS }}";
	let failedStatus = "{{ FAILED_STATUS }}";
	let cancelledStatus = "{{ CANCELLED_STATUS }}";

	let NEW_JOB_URL = "{% url "jobs:new" %}";
	let GET_JOBS_URL = "{% url "api:jobs:get_jobs" %}";
	let GET_JOB_STATUSES_URL = "{% url "api:jobs:get_statuses" %}";
	let GET_JOB_LOGS_URL = "{% url "api:jobs:get_logs" %}";
	
	let CANCEL_JOB_URL = "{% url "jobs:cancel" %}";
	let REMOVE_JOB_URL = "{% url "jobs:remove" %}";
	let RETRY_JOB_URL = "{% url "jobs:retry" %}";

	let POLLING_TIME = {{ POLLING_TIME | js }};
	let DEFAULT_MOSS_SETTINGS = {{ DEFAULT_MOSS_SETTINGS | js }};
	
	let PYTHON_SCRIPT_URL = "{% static "py/preprocess.py" %}";

</script>

{% endblock %}